<template>
  <div>
    <template v-for = "(item,index) in basicForm">
      <a-form-model :ref = "'basicForm'+index" layout = "inline" :model = "basicForm[index]"
                    @cancel = "()=>basicForm[index] = {}" :rules = "basicRules">
        <a-collapse :activeKey = "[1,2]">
          <a-collapse-panel key = "1" header = "在线监测仪">
            <a slot = "extra">
              <template v-if="!$attrs.isHide">
                <a-button @click.stop = "onEdit(index)" size="small" type = "primary" icon = "edit" v-show = "item.isEditButton">修改</a-button>
                <a-button @click.stop = "onCancel(index)" size="small" icon = "close" v-show = "!item.isEditButton">取消</a-button>
                <a-button @click.stop = "onSave(index)" size="small" type = "primary" icon = "check" v-show = "!item.isEditButton">保存</a-button>
              </template>

            </a>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "在线仪器" prop = "equipmentName">
                  <a-input v-model = "item.equipmentName" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "仪器编号" prop = "equipmentCode">
                  <a-input v-model = "item.equipmentCode" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "设备类型" prop = "equipmentType">
                  <a-input v-model="item.equipmentType" :disabled = "item.isDisable"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "监测因子名称" prop = "monitorFactorsName">
                  <a-input v-model = "item.monitorFactorsName" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "仪器使用情况" prop = "status">
                  <a-checkbox v-model = "item.status" value = "true" name = "isWarning" :disabled = "item.isDisable"></a-checkbox>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "公司名称" prop = "companyName">
                  <a-input v-model="item.companyName" :disabled = "item.isDisable"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "数采仪" >
                  <a-select  :disabled = "item.isDisable">
                    <a-select-option value = "暂无">
                      暂无
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "监测污染物" >
                  <a-input  :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">

              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "仪器使用状况">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "运维单位名称">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "运维单位联系人">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "购置日期">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "16">
                <a-form-model-item label = "安置地点" prop="address" style="width: 90%">
                  <a-input v-model="item.address" :disabled = "item.isDisable"  />
                </a-form-model-item>
              </a-col>

            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "24" >
                <a-form-model-item label = "备注" style="width: 93%">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <div class = "putOnRecords">
              <div class = "putOnRecordsTitle">> 备案登记信息</div>
              <div class = "putOnRecordsContent">
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "适用性监测报告名称">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "测量项目">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "测试方法">
                      <a-select :disabled = "item.isDisable">
                        <a-select-option value = "暂无">
                          暂无
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "检出限">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "试剂名称">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "试剂浓度">
                      <a-select :disabled = "item.isDisable">
                        <a-select-option value = "暂无">
                          暂无
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "试剂有效期">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "加热消解温度">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "加热消解时间">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "标准曲线参数">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "转换系数" >
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "24">
                    <a-form-model-item label = "备注" style="width: 93%">
                      <a-input type = "textarea" :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <div style = "height: 10px"></div>
    </template>

    <template v-if="!$attrs.isHide">
      <a-button  v-if="isShow" class="addPoint" @click="onAddPoint" type="primary" icon="plus-circle">新增</a-button>
    </template>
    <!-- 添加弹框 -->
    <a-modal v-model = "addPoint" width = "80%" title = "新增在线监测仪" centered @cancel = "()=>form = {}"
             :maskClosable = "false" destroyOnClose>
      <a-form-model ref = "form" layout = "inline" :model = "form" @cancel = "()=>form = {}" :rules = "basicRules">
        <a-collapse :activeKey = "[1]">
          <a-collapse-panel key = "1" header = "在线监测仪">
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "在线仪器" prop = "equipmentName">
                  <a-input v-model="form.equipmentName" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "仪器编号" prop = "equipmentCode">
                  <a-input v-model="form.equipmentCode" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "设备类型" prop = "equipmentType">
                  <a-input v-model="form.equipmentType" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "监测因子名称" prop = "monitorFactorsName">
                  <a-input v-model = "form.monitorFactorsName"  />
<!--                  @change="changes"-->
<!--                  <a-tree-select v-model="form.monitorFactorsName" style="width:100%" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择异常警告类型" treeNodeFilterProp="title" :replaceFields="{title: 'name',value: 'id',children: 'waringTypePoList',}" show-search allow-clear>-->
<!--                    <a-icon slot="suffixIcon" type="caret-down" />-->
<!--                  </a-tree-select>-->
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "仪器使用情况" prop = "status">
                  <a-checkbox v-model = "form.status" value = "true" name = "isWarning"></a-checkbox>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "公司名称" prop = "companyName">
                  <a-input v-model="form.companyName"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "数采仪" prop = "sendDataType">
                  <a-select>
                    <a-select-option value = "暂无">
                      暂无
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "监测污染物" prop = "sendDataInterval">
                  <a-input />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">

              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "仪器使用状况">
                  <a-input />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "运维单位名称">
                  <a-input />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "运维单位联系人">
                  <a-input />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "购置日期">
                  <a-input />
                </a-form-model-item>
              </a-col>
              <a-col :span = "16">
                <a-form-model-item label = "安置地点" prop="address" style="width: 90%">
                  <a-input v-model="form.address"/>
                </a-form-model-item>
              </a-col>

            </a-row>
            <a-row type = "flex" justify = "center" >
              <a-col :span = "24">
                <a-form-model-item label = "备注" style="width: 93%">
                  <a-input />
                </a-form-model-item>
              </a-col>
            </a-row>

            <div class = "putOnRecords">
              <div class = "putOnRecordsTitle">> 备案登记信息</div>
              <div class = "putOnRecordsContent">
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "适用性监测报告名称">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "测量项目">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "测试方法">
                      <a-select>
                        <a-select-option value = "暂无">
                          暂无
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "检出限">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "试剂名称">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "试剂浓度">
                      <a-select>
                        <a-select-option value = "暂无">
                          暂无
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "试剂有效期">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "加热消解温度">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "加热消解时间">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "标准曲线参数">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "转换系数">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                  </a-col>
                </a-row>
                <a-row type = "flex" justify = "center">
                  <a-col :span = "24">
                    <a-form-model-item label = "备注" style="width: 93%">
                      <a-input type = "textarea" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <template slot = "footer">
        <a-button type = "primary" @click = "onSubmit">确定</a-button>
      </template>
    </a-modal>
  </div>

</template>


<script>
import buttonEvent from "@/views/components/mixin/buttonEvent";
import util from "@/libs/util";
export default {
  props: {
    monitorId: {
      type: String,
      required: true
    },

  },
  mixins: [buttonEvent],
  name: "onlineMonitor",
  data() {
    return {
      addPoint: false,
      isShow:false,
      basicForm: [],
      form: {
        equipmentName: '',
        equipmentType: '',
        equipmentCode: '',
        monitorId: this.monitorId,
        address:'',
        monitorFactorsName:'',
        status:true,
        companyName:''
      },
      formOf: {
        equipmentName: '',
        equipmentType: '',
        equipmentCode: '',
        monitorId: this.monitorId,
        address:'',
        monitorFactorsName:'',
        status:true,
        companyName:''
      },
      emissionLaw: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, '其他'],
      labelCol: {
        span: 8
      },
      basicRules: {
        equipmentName: [
          {required: true, message: '请输入在线仪器', trigger: 'blur'}
        ],
        equipmentType: [
          {required: true, message: '请输入设备类型', trigger: 'blur'}
        ],
        equipmentCode: [
          {required: true, message: '请输入仪器编号', trigger: 'blur'}
        ],
        monitorFactorsName:[
          {required: true, message: '请输入监测因子名称', trigger: 'change'}
        ]
      },
      treeData:[],  // 树形检测因子
    }
  },
  methods: {
    getAcquisitionList() {
      this.$api.getEquipmentList(this.monitorId).then(res => {
        if (res.data.code == 0){
          res.data.data.forEach(item=>{
            item.isEditButton=true
            item.isDisable=true
            item.status=item.status==="true"?true:false
          })
          this.basicForm=res.data.data
          this.isShow=true
        }else {
          this.$message.error(res.data.errorMessage)
        }

      })
    },
    onAddPoint() {
      this.addPoint = true;
    },
    onEdit(index){
      console.log(index)
      this.basicForm[index].isEditButton=!this.basicForm[index].isEditButton;
      this.basicForm[index].isDisable=!this.basicForm[index].isDisable;
    },
    onCancel(index) {
      let basic=this.$refs['basicForm'+index][0]
      basic.resetFields();
      this.basicForm[index].isEditButton=!this.basicForm[index].isEditButton;
      this.basicForm[index].isDisable=!this.basicForm[index].isDisable;
    },
    onDel(index){
      let _that = this;
      this.$confirm({
        title: "是否删除仪器编号【"+this.basicForm[index].mn+"】？",
        onOk() {
          _that.$api.removeEquipmentList(_that.basicForm[index].id).then(res=>{
            if(res.data.code==0){
              _that.getAcquisitionList();
              _that.$message.success('删除成功')
            }else{
              _that.$message.error(res.data.errorMessage)
            }
          })
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    onSave(index) {
      let basic = this.$refs['basicForm' + index][0]

      basic.validate(valid => {
        if (!valid) {
          return false;
        }
        this.$api.editEquipmentList(this.basicForm[index]).then(res => {
          if (res.data.code == 0) {
            this.cancelDispose(index);
            this.$message.success('修改完成')
            this.getAcquisitionList();
          } else {
            this.$message.error(res.data.errorMessage)
          }
        })
      });
    },
    onSubmit() {
      console.log(this.form)
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        this.form.monitorId = this.monitorId
        this.$api.addEquipmentList(this.form).then(res => {
          if (res.data.code == 0) {
            this.getAcquisitionList();
            this.addPoint = false;
            this.form = this.formOf
            this.$message.success('添加成功')
          } else {
            this.$message.error(res.data.errorMessage)
          }
        })
      });
    },
    initData(){
      this.$api.GetfindByTree().then((res) => {
        debugger
        if (res.data.code == 0) {
          this.treeData = util.recursion(res.data.data);
          console.log(this.treeData)
        }
      });
    },
  },
  mounted() {
    this.initData();
  },
  watch: {
    monitorId(val) {
      this.$nextTick(() => {
        this.getAcquisitionList();
        this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped lang = "scss">
@import "../../components/style/style.scss";

.putOnRecords {
  position: relative;
}

.putOnRecordsTitle {
  padding-left: 22px;
  position: absolute;
  left: -18px;
  right: -18px;
  height: 46px;
  border: 1px solid #e8e8e8;
  line-height: 46px;
  font-size: 16px;
  background: transparent;
}

.putOnRecordsContent {
  padding-top: 50px;
}

.addPoint {
  color: rgba(255, 255, 255, 0.6);
  width: 200px;
  height: 50px;
  position: relative;
  margin-left: -100px;
  left: 50%;
  margin-top: 200px;
  margin-bottom: 200px;
}

.addPoint ::v-deep .ant-calendar-picker-icon, .addPoint ::v-deep .anticon {
  color: rgba(255, 255, 255, 0.6);
}
</style>
